<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
    <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i> 员工信息报表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>
  <span class="demonstration">员工信息报表</span>
  <el-button size="mini" type="primary" style="margin-bottom: 10px;margin-left: 20px" @click="exportExcelSelect()">
    导出EXCEL
  </el-button>
<!--数据表格-->
  <el-table :data="tableData" @selection-change="handleSelectionChange" border style="width: 100%">
    <el-table-column type="selection">
    </el-table-column>
    <el-table-column prop="id" label="ID" align="center" width="50"></el-table-column>
    <el-table-column prop="username" label="姓名" align="center" width="100"></el-table-column>
    <el-table-column prop="gender" label="性别" align="center" width="100"></el-table-column>
    <el-table-column prop="location" label="联系地址" align="center" width="150"></el-table-column>
    <el-table-column prop="phone" label="联系电话" align="center" width="120"></el-table-column>
    <el-table-column prop="email" label="电子邮件" align="center" width="180"></el-table-column>
    <el-table-column prop="employmentDate" label="入职日期" align="center" width="180"></el-table-column>
    <el-table-column prop="dept" label="部门" align="center" width="100"></el-table-column>
    <el-table-column prop="job" label="职位" align="center" width="100"></el-table-column>
    <el-table-column prop="salary" label="工资" align="center" width="100"></el-table-column>
    <el-table-column prop="state" label="员工状态" align="center" width="120"></el-table-column>
<!--在职，离职，休假    -->
  </el-table>
  <div style="margin-top: 30px">
    <el-pagination
        layout="total,prev, pager, next"
        @current-change="changePage"
        :total="total"
        :pageSize="pageSize"
        :current_Page="currentPage"
        hidden-on-single-page
    >
    </el-pagination>
  </div>
  <!--预览弹窗表格-->
  <el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
    <el-table :data="selectData" id="selectTable" height="380px">
      <el-table-column prop="id" label="ID" align="center" width="60"></el-table-column>
      <el-table-column prop="username" label="姓名" align="center" width="100"></el-table-column>
      <el-table-column prop="gender" label="性别" align="center" width="100"></el-table-column>
      <el-table-column prop="location" label="联系地址" align="center" width="100"></el-table-column>
      <el-table-column prop="phone" label="联系电话" align="center" width="120"></el-table-column>
      <el-table-column prop="email" label="电子邮件" align="center" width="180"></el-table-column>
      <el-table-column prop="employmentDate" label="入职日期" align="center" width="180"></el-table-column>
      <el-table-column prop="dept" label="部门" align="center" width="100"></el-table-column>
      <el-table-column prop="job" label="职位" align="center" width="100"></el-table-column>
      <el-table-column prop="salary" label="工资" align="center" width="100"></el-table-column>
      <el-table-column prop="state" label="员工状态" align="center" width="120"></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="exportExcel">确定保存</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  name: "employee",
  data(){
    return{
      tableData:[],
      //表格中选择的数据
      selectData:[],
      selectWindow:false,
      total:0,
      pageSize:0,
      currentPage:0,
    }
  },
  created() {
    this.loadCategoryList();

  },
  methods:{
    //格式化数据
    getExcel(dom,title ='默认标题',){
      var excelTitle = title;
      var wb = XLSX.utils.table_to_book(document.querySelector(dom));
      //获取二进制字符串作为输出
      var wbot = XLSX.write(wb,{bookType:"xlsx",bookSST:true,type:"array"});
      try {
        FileSaver.saveAs(
            new Blob([wbot],{type:"application/octet-stream"}),
            excelTitle + ".xlsx"
        );
      }catch (e){
        if (typeof console !== "undefined") console.log(e,wbot);
      }
      return wbot;
    },
    //导出
    exportExcel(){
      this.getExcel('#selectTable','员工报表')
    },
    //显示预览弹窗
    exportExcelSelect(){
      if (this.selectData.length<1){
        this.$message.error('请选择要导出的内容!');
        return false;
      }
      this.selectWindow=true;
    },
    //选中数据
    handleSelectionChange(val){
      this.selectData = val;
    },
    changePage(page){
      this.$router.replace('?page='+page);
      this.loadCategoryList();
    },
    loadCategoryList(){
      let page = this.$router.currentRoute.query.page;
      if (!page){
        page=1;
      }
      let url='http://localhost:9999/table/employmentTablex?page='+page;
      console.log('url'+url);
      this.axios.get(url).then((response)=>{
        this.tableData = response.data.data.list;
        this.total=response.data.data.total;
        this.pageSize=response.data.data.pageSize;
        this.currentPage=response.data.data.currentPage;
      })
    }
  }

}
</script>

<style scoped>

</style>